<template>
  <div 
    class="script-step group relative p-4 border-2 rounded-xl transition-all duration-300 cursor-pointer hover:shadow-lg hover:scale-[1.02] bg-white"
    :class="getStepClasses(step)"
    @click="$emit('select', step)"
  >
    <!-- 步骤主体 -->
    <div class="flex items-start">
      <!-- 步骤编号和状态指示器 -->
      <div class="flex flex-col items-center mr-4">
        <div 
          class="w-8 h-8 rounded-full text-white flex items-center justify-center text-sm font-bold step-number shadow-md"
          :class="getStepNumberClasses(step)"
        >
          {{ step.stepNumber }}
        </div>
        <!-- 状态指示线 -->
        <div 
          class="w-0.5 h-6 mt-2 rounded-full"
          :class="getStatusLineClasses(step)"
        ></div>
      </div>

      <!-- 步骤内容区域 -->
      <div class="flex-1 min-w-0">
        <!-- 步骤标题和状态 -->
        <div class="flex items-center justify-between mb-2">
          <div class="flex items-center">
            <!-- 步骤类型图标 -->
            <div class="w-8 h-8 rounded-lg flex items-center justify-center mr-3"
                 :class="getTypeIconBgClasses(step)">
              <el-icon class="text-white text-sm">
                <component :is="getTypeIcon(step)" />
              </el-icon>
            </div>
            
            <!-- 步骤描述 -->
            <div class="flex-1 min-w-0">
              <h4 class="text-sm font-semibold text-gray-800 truncate">
                {{ step.name || step.description || getDefaultDescription(step) }}
              </h4>
              <p class="text-xs text-gray-500 mt-0.5">{{ getStepTypeLabel(step) }}</p>
            </div>
          </div>

          <!-- 状态指示器 -->
          <div class="flex items-center">
            <el-icon 
              class="text-lg step-status-icon"
              :class="getStatusIconClasses(step)"
            >
              <component :is="getStatusIcon(step)" />
            </el-icon>
          </div>
        </div>

        <!-- 操作按钮组 -->
        <div v-if="!readonly" class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 mb-3">
          <!-- 运行单个步骤按钮 -->
          <el-button
            v-if="showRunButton"
            text
            size="small" 
            class="run-step-btn px-2 py-1 text-xs text-gray-500 hover:text-green-500 hover:bg-green-50 rounded-md"
            @click.stop="$emit('run', step)"
            title="运行此步骤"
          >
            <el-icon class="mr-1"><VideoPlay /></el-icon>运行
          </el-button>

          <!-- 编辑按钮 -->
          <el-button
            text
            size="small"
            class="px-2 py-1 text-xs text-gray-500 hover:text-blue-500 hover:bg-blue-50 rounded-md"
            @click.stop="$emit('edit', step)"
            title="编辑步骤"
          >
            <el-icon class="mr-1"><Edit /></el-icon>编辑
          </el-button>

          <!-- 删除按钮 -->
          <el-button
            text
            size="small"
            class="px-2 py-1 text-xs text-gray-500 hover:text-red-500 hover:bg-red-50 rounded-md"
            @click.stop="$emit('delete', step)"
            title="删除步骤"
          >
            <el-icon class="mr-1"><Delete /></el-icon>删除
          </el-button>
        </div>
      </div>
    </div>

    <!-- 步骤详情 -->
    <div class="bg-gray-50 rounded-lg p-3 mb-3">
      <div class="text-xs text-gray-600">
        <span v-if="step.url" class="flex items-center">
          <el-icon class="mr-1 text-blue-500"><i-ep-link /></el-icon>
          <span class="truncate">{{ step.url }}</span>
        </span>
        <span v-else-if="step.selector" class="flex items-center">
          <el-icon class="mr-1 text-green-500"><i-ep-aim /></el-icon>
          <span class="truncate">{{ step.selector }}</span>
        </span>
        <span v-else-if="step.value" class="flex items-center">
          <el-icon class="mr-1 text-purple-500"><i-ep-edit /></el-icon>
          <span>输入: {{ step.value }}</span>
        </span>
        <span v-else-if="step.expectedValue" class="flex items-center">
          <el-icon class="mr-1 text-orange-500"><i-ep-check /></el-icon>
          <span>验证: {{ step.expectedValue }}</span>
        </span>
        <span v-else class="flex items-center">
          <el-icon class="mr-1 text-gray-500"><i-ep-info /></el-icon>
          <span>{{ getStepDetails(step) }}</span>
        </span>
      </div>
    </div>

    <!-- 步骤代码预览 (可展开) -->
    <div v-if="showCode && step.originalCode" class="mt-3">
      <details class="text-xs">
        <summary class="cursor-pointer text-gray-600 hover:text-primary select-none flex items-center">
          <el-icon class="mr-1"><i-ep-code /></el-icon>
          查看代码
        </summary>
        <pre class="mt-2 p-3 bg-gray-900 text-gray-100 rounded-lg font-mono text-xs overflow-x-auto border">{{ step.originalCode }}</pre>
      </details>
    </div>

    <!-- 步骤执行信息 (如果有) -->
    <div v-if="step.executionInfo" class="mt-3 p-2 bg-blue-50 rounded-lg">
      <div class="flex items-center text-xs text-blue-600">
        <el-icon class="mr-1"><Clock /></el-icon>
        <span>执行时间: {{ formatDuration(step.executionInfo.duration) }}</span>
        <span v-if="step.executionInfo.retryCount > 0" class="ml-2 px-2 py-0.5 bg-orange-100 text-orange-600 rounded">
          重试: {{ step.executionInfo.retryCount }}次
        </span>
      </div>
      <div v-if="step.executionInfo.error" class="mt-1 text-red-600 text-xs">
        {{ step.executionInfo.error }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { 
  Edit, 
  Delete, 
  Check, 
  Close, 
  Loading, 
  Warning,
  Link,
  Promotion,
  Mouse,
  View,
  Clock,
  Camera,
  Document,
  VideoPlay,
  Position
} from '@element-plus/icons-vue'

const props = defineProps({
  step: {
    type: Object,
    required: true
  },
  status: {
    type: String,
    default: 'pending'
  },
  readonly: {
    type: Boolean,
    default: false
  },
  showCode: {
    type: Boolean,
    default: true
  },
  showRunButton: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['select', 'edit', 'delete', 'run'])

// 状态类名
const getStepClasses = (step) => {
  const classes = ['hover:shadow-md']
  
  switch (props.status) {
    case 'success':
      classes.push('border-green-300', 'bg-green-50')
      break
    case 'failed':
      classes.push('border-red-300', 'bg-red-50')
      break
    case 'running':
      classes.push('border-blue-300', 'bg-blue-50')
      break
    case 'selected':
      classes.push('border-primary', 'bg-blue-50')
      break
    default:
      classes.push('border-gray-200', 'hover:border-primary')
  }
  
  return classes
}

// 步骤编号样式
const getStepNumberClasses = (step) => {
  switch (props.status) {
    case 'success':
      return 'bg-green-500'
    case 'failed':
      return 'bg-red-500'
    case 'running':
      return 'bg-blue-500'
    default:
      return 'bg-primary'
  }
}

// 状态图标样式
const getStatusIconClasses = (step) => {
  switch (props.status) {
    case 'success':
      return 'text-green-500'
    case 'failed':
      return 'text-red-500'
    case 'running':
      return 'text-blue-500 animate-spin'
    default:
      return 'text-gray-400'
  }
}

// 状态图标
const getStatusIcon = (step) => {
  switch (props.status) {
    case 'success':
      return Check
    case 'failed':
      return Close
    case 'running':
      return Loading
    default:
      return Warning
  }
}

// 类型图标
const getTypeIcon = (step) => {
  switch (step.type) {
    case 'navigation':
      return Link
    case 'input':
      return Promotion
    case 'click':
      return Mouse
    case 'assertion':
      return View
    case 'wait':
      return Clock
    case 'screenshot':
      return Camera
    default:
      return Document
  }
}

// 状态指示线样式
const getStatusLineClasses = (step) => {
  switch (props.status) {
    case 'success':
      return 'bg-green-500'
    case 'failed':
      return 'bg-red-500'
    case 'running':
      return 'bg-blue-500'
    default:
      return 'bg-gray-300'
  }
}

// 类型图标背景样式
const getTypeIconBgClasses = (step) => {
  switch (step.type) {
    case 'navigation':
      return 'bg-blue-500'
    case 'input':
      return 'bg-purple-500'
    case 'click':
      return 'bg-green-500'
    case 'assertion':
      return 'bg-orange-500'
    case 'wait':
      return 'bg-yellow-500'
    case 'screenshot':
      return 'bg-pink-500'
    default:
      return 'bg-gray-500'
  }
}

// 步骤类型标签
const getStepTypeLabel = (step) => {
  switch (step.type) {
    case 'navigation':
      return '页面导航'
    case 'input':
      return '文本输入'
    case 'click':
      return '元素点击'
    case 'assertion':
      return '断言验证'
    case 'wait':
      return '等待操作'
    case 'screenshot':
      return '截图操作'
    default:
      return '其他操作'
  }
}

// 默认描述
const getDefaultDescription = (step) => {
  switch (step.type) {
    case 'navigation':
      return step.action === 'goto' ? '打开网页' : '页面导航'
    case 'input':
      return step.action === 'fill' ? '输入文本' : '文本输入'
    case 'click':
      return '点击元素'
    case 'assertion':
      return '验证断言'
    case 'wait':
      return '等待'
    case 'screenshot':
      return '截图'
    default:
      return '未知操作'
  }
}

// 步骤详情
const getStepDetails = (step) => {
  switch (step.type) {
    case 'navigation':
      return step.url || '无URL'
    case 'input':
      return step.description ? `${step.description} → "${step.value || ''}"` : '无选择器'
    case 'click':
      return step.description || '无选择器'
    case 'assertion':
      return `${step.assertType || '检查'}: ${step.expectedValue || ''}`
    case 'wait':
      return step.waitType === 'element' 
        ? `等待元素: ${step.selector || ''}`
        : `等待时间: ${step.duration || 1000}ms`
    case 'screenshot':
      return `保存为: ${step.filename || 'screenshot'}.png`
    default:
      return '配置中...'
  }
}

// 格式化时间
const formatDuration = (duration) => {
  if (!duration) return '0ms'
  if (duration < 1000) return `${duration}ms`
  return `${(duration / 1000).toFixed(2)}s`
}
</script>

<style scoped>
.script-step {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.script-step:hover {
  transform: translateY(-1px);
}

.step-status-icon {
  transition: all 0.3s ease;
}
</style>
